<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"  style="display:inline;"></app-title>
<el-button type="success" @click="refresh()" round style="float:right; margin-top:10px;" icon="el-icon-refresh">刷新</el-button>
            <el-table v-loading="loading" border :data="tableData.body" :row-class-name="tableRowClassName">

                <el-table-column prop="startTimeRO" align="center" label="开始时间" ></el-table-column>
                <el-table-column prop="endTimeRO" align="center" label="结束时间" ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small"  @click="edit">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :title="dialogTitle" :visible.sync="editTableShow" width='30%' :fullscreen='false'>
                 <el-row>
                    <el-col :span="5">
                        开始时间
                    </el-col>
                    <el-col :span="12">
            <el-time-select
                        placeholder="开始时间"
                        v-model="startTime"
                        :picker-options="{
                            start: '00:00',
                            step: '00:30',
                            end: '24:00'
                        }">
                  </el-time-select>
              </el-col>
          </el-row>
           <el-row>
                    <el-col :span="5">
                        结束时间
                    </el-col>
                    <el-col :span="12">
                <el-time-select
                        placeholder="结束时间"
                        v-model="endTime"
                        :picker-options="{
                            start:'00:00',
                            step:'00:30',
                            end:'23:59',
                            minTime: startTime
                        }">
            </el-time-select>
        </el-col>
    </el-row>
                <el-button @click.native.prevent="ok">确定</el-button>
                <el-button @click.native.prevent="cancel">取消</el-button>
            </el-dialog>
    </div>

</template>

<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>

<script>
export default {
    name: 'userloginallowtime',
    data(){
        return {
            dialogTitle:"用户允许登录时间段管理",
            failcnt:1,
            loading: false,
            editTableShow: false,
            tableData:{
                body:[{startTimeRO: '00:00', endTimeRO : '23:30'}],
                head:[],
                loading: true

            },
            startTime:"",
            endTime:"",

            errorMsg:"您的信息有误，请联系管理员修改",
            issafe:true

       }
    },

    mounted(){
        this.query()
    },
    methods:{
        refresh(){
            this.query()
        },
      tableRowClassName({row, rowIndex}) {
          if(this.issafe === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
      },

        edit(){
          this.startTime = this.tableData.body[0].startTimeRO;
          this.endTime = this.tableData.body[0].endTimeRO;
           this.editTableShow = true
        },
        ok(){
            this.editTableShow = false
            var startTime0 = this.startTime.length>5?this.startTime: this.startTime+":00";
            var endTime0 = this.endTime.length>5?this.endTime: this.endTime+":00";

            this.HTTP.methods.apiPost("/sysconfig/b0006.shtml",
                {content:startTime0+"-"+endTime0,id: this.tableData.body[0].id }).
            then(res =>
            {
                if (res.status != 200) {
                this.$message(res.msg);
                // this.GLOBAL._g.toastMsg('error', res.msg)
            } else {
                this.tableData.body[0] = this.selectVal;
                this.$message("设置成功");
                // this.GLOBAL._g.toastMsg('success', '修改成功')
            }
            this.loading = false;
        }).catch(function (error) {
                   $.message("网络超时", 'error')

            })
        },
        cancel(){
            this.editTableShow = false
            this.failcnt = 1
            this.selectVal = 1

        },
        //缺少一种点进去链接，就发请求的listener
        query(){
            this.HTTP.methods.apiGet("/sysconfig/b0006", {}).then(res =>
            {
                if(res.code == 200){
                    var timearr = res.data.content.split("-");
                this.tableData.body[0].startTimeRO = timearr[0];
                this.tableData.body[0].endTimeRO = timearr[1];

                this.issafe = res.data.safe
            }else{
                this.tableData.body = []
            }
        }).catch(function (error) {
                   $.message("网络超时", 'error')

            })
        }
    }
}
</script>


